<template>
  <div class="fund">
    <div class="_box _top">
      <Header></Header>
    </div>
    <div class="_box _chart">
      <div class="_title">
        <span style=" font-size:0.4rem;display:block;
                      width:100%;text-align:left;
                      color:#424242;">在线资金</span>
        <span style="display:block;width:100%;text-align:left;font-family:'Share-Tech'">{{chart.title}}</span>
      </div>
      <div class="_graph" id="mychart"></div>
    </div>
    <div class="_box fundwatch">
      <div class="_card">
        <div class="_title">
          <span style=" font-size:0.35rem;
                        font-weight:600;color:#fff;
                        display:block;text-align:left;
                        width:55%;height:50%;
                        position:relative;float:left;
                        line-height:4vh;">
              今日收益
          </span>
          <div class="_icon">
            <i class="iconfont iconkanguo" style="font-size:0.45rem;"></i>
          </div>
          <div class="_number">
            {{watch.number}}
          </div>
        </div>
        <div class="_msg">
          <div></div>
        </div>
        <div style="
                height:1px;background:#eee;width:30%;
                position: absolute;top:50%;left:10vw"></div>
        <div style="
                height:80%;background:#eee;width:1px;
                position: absolute;top:10%;left:50%"></div>
        <div ></div>
      </div>
    </div>
    <div class="_box foundation"></div>
    <div class="_box _bottom">
      <Leader></Leader>
    </div>
  </div>
</template>

<script>
import Header from '../../components/header.vue'
import Leader from '../../components/leader.vue'
export default {
  data () {
    return {
      chart: {
        title: '6900.00'
      },
      watch: {
        number: '32.00'
      }
    }
  },
  methods: {
    SetEchart () {
      // eslint-disable-next-line no-unused-vars
      let myChart = this.$echarts.init(document.getElementById('mychart'))
      let base = +new Date(1968, 9, 3)
      let oneDay = 24 * 3600 * 1000
      let date = []

      let data = [Math.random() * 300]
      // eslint-disable-next-line no-unused-vars
      let option = {
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '10%']
          }
        },
        toolbox: {
          feature: {
            restore: {}
          },
          top: '2%',
          right: '5%'
        },
        grid: {
          x: 0,
          y: 0,
          x2: 0,
          y2: '20%'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: date,
          splitLine: {
            show: true,
            interval: 'auto',
            lineStyle: {
              color: 'f5f5f5'
            }
          },
          axisLabel: {
            color: '#757575'
          }
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%'],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            inside: true,
            color: '#757575'
          },
          splitNumber: 4
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 10
          },
          {
            start: 0,
            end: 10,
            handleIcon:
              'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
              color: '#fff',
              shadowBlur: 3,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          }
        ],
        series: [
          {
            name: '模拟数据',
            type: 'line',
            smooth: true,
            symbol: 'none',
            sampling: 'average',
            itemStyle: {
              color: 'rgb(255, 70, 131)'
            },
            areaStyle: {
              // eslint-disable-next-line no-undef
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255, 158, 68)'
                },
                {
                  offset: 1,
                  color: 'rgb(255, 70, 131)'
                }
              ])
            },
            data: data
          }
        ]
      }

      for (var i = 1; i < 20000; i++) {
        var now = new Date((base += oneDay))
        date.push(
          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')
        )
        data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]))
      }

      myChart.setOption(option)
    },
    allotData () {}
  },
  computed: {},
  mounted () {
    this.SetEchart()
  },
  components: {
    Leader,
    Header
  }
}
</script>

<style scoped>
.fund {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
._box {
  width: 100%;
}
._top {
  position: fixed;
  top: 0;
  z-index: 100;
}
._bottom {
  position: fixed;
  bottom: 0;
  z-index: 100;
}
._chart {
  width: 100%;
  height: 40vh;
  position: relative;
  top: 8vh;
}
.fundwatch {
  width: 100%;
  height: 20vh;
  position: relative;
  top: 8vh;
}
.foundation {
  width: 100%;
  min-height: 20vh;
  position: relative;
  top: 10vh;
}

/* detail */
._chart ._title {
  width: 40%;
  height: auto;
  position: relative;
  font-size: 0.8rem;
  z-index: 100;
  top: 1vh;
  left: 2vh;
}
._chart ._graph {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
.fundwatch ._card{
  width: 94%;
  height: 100%;
  position: relative;
  margin: 0 auto;
  background: #fff;
  background-image: linear-gradient(#ffa726, #ef6c00);
  box-shadow:0 0.05rem 0.05rem #ccc;
  border-radius: 0.2rem;
}
.fundwatch ._title{
  width: 40%;
  position: relative;
  height: 40%;
  top:0.5vh;
  left: 2vh;
}

.fundwatch ._title ._icon{
  position: relative;
  float: left;
  width: 30%;
  height: 50%;
  text-align: left;
  line-height: 4vh;
  color:#eee
}
.fundwatch ._title ._number{
  position: relative;
  width: 100%;
  height: 50%;
  float: left;
  text-align: center;
  line-height: 4vh;
  font-size:0.6rem;
  font-family: 'Share-Tech';
}
.fundwatch ._msg{
  width: 45%;
  position: absolute;
  height: 50%;
  top:50%;
  left: 2vh;
}
</style>
